<template>
  <div id="bug">
    <div class="bug-search">
      <el-select v-model="bugProject" clearable placeholder="请选择项目序号" style="width: 180px; margin-left: 30px">
        <el-option
            v-for="(item,i) in search.project"
            :key="i"
            :value="item">
        </el-option>
      </el-select>
      <el-select v-model="bugState" clearable placeholder="请选择缺陷状态" style="width: 180px; margin-left: 30px">
        <el-option value="待分配"></el-option>
        <el-option value="待处理"></el-option>
        <el-option value="处理中"></el-option>
        <el-option value="已完成"></el-option>
      </el-select>
      <el-input
          style="width: 500px; margin-left: 30px"
          placeholder="请输入查询内容"
          v-model="input"
          clearable
          @keyup.enter.native="getSearchInfo">
      </el-input>
      <el-button icon="el-icon-search" circle @click="getSearchInfo" style="margin-left: 30px"></el-button>
    </div>
    <div class="bug-info">
      <el-table
          :data="tableData"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          style="width: 100%; padding: 35px 10px">
        <el-table-column
            label="缺陷ID"
            prop="bugId"
            width="80">
        </el-table-column>
        <el-table-column
            label="项目ID"
            prop="projectId"
            width="80">
        </el-table-column>
        <el-table-column
            label="缺陷名"
            prop="bugName"
            width="150">
        </el-table-column>
        <el-table-column
            label="缺陷描述"
            prop="bugDetail"
            width="220">
        </el-table-column>
        <el-table-column
            label="缺陷分类"
            prop="bugClassify"
            width="100">
        </el-table-column>
        <el-table-column
            label="缺陷程度"
            prop="degree"
            width="100">
        </el-table-column>
        <el-table-column
            label="缺陷优先级"
            prop="bugPriority"
            width="90">
        </el-table-column>
        <el-table-column
            label="处理进度"
            prop="dostate"
            width="100">
        </el-table-column>
        <el-table-column
            align="right">
          <template slot-scope="scope">
            <el-dialog title="缺陷文件提交" :visible.sync="dialogFormVisible" width="600px" :modal-append-to-body="false"
                       style="overflow: hidden">
              <el-upload
                  ref="elUpload"
                  class="upload-demo"
                  drag
                  :auto-upload="false"
                  action=""
                  :before-upload="beforeUpload"
                  :http-request="StartUpload">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="upload();dialogFormVisible = false;">提 交</el-button>
              </div>
            </el-dialog>
            <el-button
                type="primary"
                size="mini"
                @click="handleEdit(scope.$index, scope.row);dialogFormVisible = true">任务进程提交
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bug-info-pages">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=page.current
            :page-sizes="[5, 10, 30]"
            :page-size=page.size
            layout="total, sizes, prev, pager, next, jumper"
            :total=page.total>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BugInfo",
  data() {
    return {
      bugProject: '',
      bugState: '',
      input: '',
      tableData: [],
      url: '',
      upFile: new FormData(),
      search: {
        project: [],
        state: []
      },
      page: {
        current: 1,
        size: 5,
        pages: 0,
        total: 0,
        records: []
      },
      bugInfo: {
        projectId: 0,
        bugId: 0,
        bugName: '',
        bugDetail: '',
        bugClassify: '',
        degree: '',
        bugPriority: '',
        rstartetime: '',
        rendtime: '',
        ptime: 0,
        stime: 0,
        dealName: '',
        dostate: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '80px'
    }
  },
  watch: {
    deep: true,
    dialogFormVisible(newVal, oldVal) {
      if (!newVal) {
        setTimeout(function () {
          location.reload()
        }, 1000)
      }
    }
  },
  methods: {
    beforeUpload(file) {
      if (file) {
        this.upFile.append('file', file);
      } else {
        return false;
      }
    },
    upload() {
      this.$refs.elUpload.submit();
    },
    StartUpload() {
      this.$axios
          .post('/submitBug/uploadFile', this.upFile, {
            headers: {
              'Content-Type': 'multipart/form-data',
              "token": localStorage.getItem("token")
            }
          })
          .then((resp) => {
            if (resp.data.flag) {
              this.url = resp.data.data;
              this.ok("提交成功");
              this.$axios
                  .post("/submitBug/saveRecord", {
                    info: this.bugInfo,
                    url: this.url
                  }, {headers: {"token": localStorage.getItem("token")}})
            } else {
              this.error("上传缺陷文件失败");
            }
          })
    },


    handleEdit(index, row) {
      this.bugInfo = row;
    },
    ok(val) {
      this.$notify({
        title: '成功',
        message: val,
        type: 'success'
      });
    },
    error(val) {
      this.$notify.error({
        title: '错误',
        message: val
      });
    },

    handleSizeChange(val) {
      this.page.size = val;
      this.$axios
          .get("/submitBug/allBug", {
            params: {
              current: this.page.current,
              size: this.page.size,
              userId: localStorage.getItem("userId")
            },
            headers: {"token": localStorage.getItem("token")}
          })
          .then((resp) => {
            this.tableData = resp.data.data.records;
          })
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.$axios
          .get("/submitBug/allBug", {
            params: {
              current: this.page.current,
              size: this.page.size,
              userId: localStorage.getItem("userId")
            },
            headers: {"token": localStorage.getItem("token")}
          })
          .then((resp) => {
            this.tableData = resp.data.data.records;
          })
    },
    getToday() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      }
      const month = date.month > 10 ? date.month : '0' + date.month;
      const day = date.date > 10 ? date.date : '0' + date.date;
      return date.year + '-' + month + '-' + day;
    },
    getAllBug() {
      this.$axios
          .get("/submitBug/allBug", {
            params: {
              current: this.page.current,
              size: this.page.size,
              userId: localStorage.getItem("userId")
            },
            headers: {"token": localStorage.getItem("token")}
          })
          .then((resp) => {
            this.tableData = resp.data.data.records;
            this.page.total = resp.data.data.total;
          })
    },
    getAllProject() {
      this.$axios
          .get("/submitBug/allProject", {
            params: {
              userId: localStorage.getItem("userId")
            },
            headers: {"token": localStorage.getItem("token")}
          })
          .then((resp) => {
            this.search.project = resp.data.data
          })
    },
    getSearchInfo() {
      this.$axios
          .get("/submitBug/searchBugInfo", {
            params: {
              projectId: this.bugProject,
              state: this.bugState,
              info: this.input,
              userId: localStorage.getItem("userId")
            },
            headers: {"token": localStorage.getItem("token")}
          })
          .then((resp) => {
            this.tableData = resp.data.data;
            this.page.total = resp.data.data.length;
          })
    },
  },
  created() {
    this.getAllBug();
    this.getAllProject();
  }
}
</script>

<style scoped>
#bug {
  width: 100%;
  padding-top: 20px;
}

.bug-search {
  max-width: 1100px;
  height: 40px;
  padding: 10px 40px;
  margin: 0 auto;
}

.bug-info {
  max-width: 1100px;
  margin: 20px auto;
  padding: 20px 20px;
}

.bug-info-pages {
  width: 550px;
  margin: 20px auto;
  background-color: #ffffff;
  padding: 5px 50px;
  border-radius: 10px;
}

/deep/ .el-input__inner {
  text-align: center;
}

/deep/ .el-table {
  background-color: rgba(255, 255, 255, 0.6);
}

/deep/ .el-form {
  width: 400px;
  margin: 0 auto;
}
</style>